﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Harita.aspx.cs" Inherits="Fabrikatorum.Fabrikator.Sayfa.Harita" %>
    <form id="form1" runat="server">
        <div class="row">
    <div id="breadcrumb" class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="Default.aspx#Sayfa/Anasayfa.aspx" class="ajax-link"><i class="fa fa-home"></i> <span class="hidden-xs"> Ana Sayfa</span></a></li>
            <li><a href="Default.aspx#Sayfa/Fabrikalariniz.aspx" class="ajax-link"><i class="fa fa-building-o"></i> <span class="hidden-xs"> Fabrikalarınız</span></a></li>
        </ol>
       
    </div>
</div>
<div class="row">
<%--<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    		<div class="box" style="height:150px">
			<div class="box-header">
				<div class="box-name">
					<i class="fa fa-building-o"></i>
					<span>Şehir İşlemler</span>
				</div>
				<div class="box-icons">
					<a class="collapse-link">
						<i class="fa fa-chevron-up"></i>
					</a>
					<a class="expand-link">
						<i class="fa fa-expand"></i>
					</a>
					<a class="close-link">
						<i class="fa fa-times"></i>
					</a>
				</div>
				<div class="no-move"></div>
			</div>
			<div class="box-content">
                <div class="SehirBilgi"></div>

			</div>
		</div>
</div>--%>

<div id="vmap" class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="height:400px;"></div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
        		<div class="box" style="height:150px">
			<div class="box-header">
				<div class="box-name">
					<i class="fa fa-building-o"></i>
					<span>Şehir Bilgi ve İşlemler</span>
				</div>
				<div class="box-icons">
					<a class="collapse-link">
						<i class="fa fa-chevron-up"></i>
					</a>
					<a class="expand-link">
						<i class="fa fa-expand"></i>
					</a>
					<a class="close-link">
						<i class="fa fa-times"></i>
					</a>
				</div>
				<div class="no-move"></div>
			</div>
			<div class="box-content">
                <div class="SehirIslemler"></div>

			</div>
		</div>
</div> 
</div>
        <style>
	.SehirBilgi{

		display: none;
	}
    	.SehirIslemler{
		display: none;
	}
        </style>
    </form>
<script type="text/javascript">
    function Harita() {
        var acikmi = true;
        var sehir_nufus = { "1": "82700", "2": "26480", "3": "31530", "4": "22820", "5": "15550", "6": "205790", "7": "78830", "8": "7860", "9": "39940", "10": "49210", "11": "9120", "12": "10690", "13": "14100", "14": "11890", "15": "10520", "16": "105260", "17": "23240", "18": "4750", "19": "25350", "20": "41100", "21": "63430", "22": "17890", "23": "25570", "24": "9650", "25": "37350", "26": "32300", "27": "68240", "28": "21140", "29": "5430", "30": "10700", "31": "58560", "32": "19460", "33": "66610", "34": "564890", "35": "166200", "36": "12820", "37": "13950", "38": "52910", "39": "14710", "40": "9610", "41": "57790", "42": "84160", "43": "26490", "44": "32500", "45": "56550", "46": "43550", "47": "33240", "48": "32510", "49": "17550", "50": "12250", "51": "12670", "52": "30760", "53": "12740", "54": "36390", "55": "55280", "56": "12230", "57": "9010", "58": "27230", "59": "32800", "60": "28180", "61": "32970", "62": "3760", "63": "63760", "64": "14550", "65": "47470", "66": "20700", "67": "27350", "68": "15470", "69": "3700", "70": "9600", "71": "13350", "72": "21840", "73": "17440", "74": "7470", "75": "5050", "76": "7670", "77": "7340", "78": "9310", "79": "5240", "80": "21350", "81": "14580" };
        $('#vmap').vectorMap(
    {
        map: 'turkey_tr',
        backgroundColor: null,//'#a5bfdd',
        borderColor: '#00000',
        borderOpacity: 0.25,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: true,
        hoverColor: '#999999',
        values: sehir_nufus,
        hoverOpacity: null,
        //   normalizeFunction: 'linear',
        scaleColors: ['#99FFFF', '#434f7b'],
        selectedColor: '#666666',
        selectedRegion: null,
        showTooltip: false,
        normalizeFunction: 'polynomial',
        //onRegionClick: function (element, code, region) {
        //    var message = 'You clicked "'
        //        + region
        //        + '" which has the code: '
        //        + code.toUpperCase();

        //    alert(message);
        //}
        //  regionsSelectableOne: true,
        onRegionOver: function (event, code, region) {
            document.body.style.cursor = "pointer";
            var SehirTablo = "<table class=table>";
            SehirTablo += "<tr><td>" + region + "</td><tr>";
            SehirTablo += "<tr><td>Population" + sehir_nufus[code] + "</td></tr>";
            SehirTablo += "</table>";
            //var theTable = "<table cellpadding=2 border=0 class=hoverTable><tr><td>";
            //theTable += "<td><h1 style='color: white'>" +region + "</h1></td></tr>";
            //theTable += "<tr><td>Population</td><td>" + sehir_nufus[code] + "</td></tr>";
            //theTable += "<tr><td>Life Expectency</td><td>" + "Denemecik" + "</td></tr>";
            //theTable += "<tr><td>Area km/<sup>2</sup></td><td>" + "Denemecik" + "</td></tr>";
            //theTable += "<tr><td>Highest Peak</td><td>" + "Denemecik" + "</td></tr>";
            //theTable += "</table>";
            $(".SehirBilgi").html(SehirTablo).css('display', 'block');
            console.log(SehirTablo);
        },
        onRegionOut: function (element, code, region) {
            document.body.style.cursor = "default";
            //    $(".SehirIslemler").html('İşlem yapacağınız şehre tıklayınız!').css('display', 'none');
            $(".SehirBilgi").html('&amp;nsbp;').css('display', 'none');
        },
        onRegionClick: function (element, code, region) {
            document.body.style.cursor = "pointer";
            var SehirIslemler = "<table class=table>";
            SehirIslemler += "<tr><td>Şehir Adı: " + region + "</td>";
            SehirIslemler += "<td>Nüfusu: " + sehir_nufus[code] + "</td></tr>";
            SehirIslemler += "<tr><td>Fabrika Sayısı <a href=#Deneme" + code + ">tıklayınız!</a></td>";
            SehirIslemler += "<td>Mağaza Sayısı <a href=#Deneme" + code + ">tıklayınız!</a></td></tr>";
            SehirIslemler += "<tr><td>Fabrika Kurmak için <a href=#Fabrika" + code + ">tıklayınız!</a></td>";
            SehirIslemler += "<td>Mağaza Açmak için <a href=#Magaza" + code + ">tıklayınız!</a></td></tr>";
            SehirIslemler += "</table>";
            $(".SehirIslemler").html(SehirIslemler).css('display', 'block');
            console.log(SehirIslemler);
        }
    });
        //HaritaPopOver();
    }
    $(document).ready(function () {
        WinMove();
        Harita();
    });
</script>

